<template>
    <view class="container">
        <view class="userinfo">
            <view class="userinfo-avatar">
                <open-data type="userAvatarUrl"></open-data>
            </view>
            <view class="userinfo-name">
                <open-data type="userNickName"></open-data>
            </view>
        </view>
        <view class="binding-phone">
            <text class="show-tip">绑定手机号后可查看订单和领取优惠券，</text>
            <text class="gotobinding" @click="toBindingPhone">去绑定</text>
        </view>
        <view class="list-cont">
            <view class="total-order">
                <view class="order-tit">
                    <view class="order-tit">
                        <text style="font-weight: bold">我的订单</text>
                        <view
                            class="checkmore"
                            @click="toOrderListPage"
                            data-sts="0"
                        >
                            <text>查看全部 </text>
                            <text class="arrowhead"></text>
                        </view>
                    </view>
                </view>
                <view class="procedure">
                    <view class="items" @click="toOrderListPage" data-sts="1">
                        <img src="../../static/images/icon/toPay.png" alt="" />
                        <text>待支付</text>
                        <text class='num-badge' v-if="orderAmount.unPay>0">{{orderAmount.unPay}}</text>
                    </view>
                    <view class="items" @click="toOrderListPage" data-sts="2">
                        <img
                            src="../../static/images/icon/toDelivery.png"
                            alt=""
                        />
                        <text>待发货</text>
                        <text class='num-badge' v-if="orderAmount.payed>0">{{orderAmount.payed}}</text>
                    </view>
                    <view class="items" @click="toOrderListPage" data-sts="3">
                        <img src="../../static/images/icon/toTake.png" alt="" />
                        <text>待收货</text>
                        <text class='num-badge' v-if="orderAmount.consignment>0">{{orderAmount.consignment}}</text>
                    </view>
                    <view class="items" @click="toOrderListPage" data-sts="5">
                        <img
                            src="../../static/images/icon/toComment.png"
                            alt=""
                        />
                        <text>已完成</text>
                    </view>
                </view>
            </view>
            <view class="prod-col">
                <view class="col-item" @click="myCollectionHandle">
                    <view class="num">{{collectionCount}}</view>
                    <view class="tit">我的收藏</view>
                </view>
                <view class="col-item">
                    <view class="num">5</view>
                    <view class="tit">我的消息</view>
                </view>
                <view class="col-item">
                    <view class="num">3</view>
                    <view class="tit">我的足迹</view>
                </view>
                <view class="col-item" bindtap="goScore">
                    <view class="num">0</view>
                    <view class="tit">我的积分</view>
                </view>
            </view>
            <view class="my-menu">
                <view
                    class="memu-item"
                    @click="headleAddress"
                    bindtap="toAddressList"
                >
                    <view class="i-name">
                        <image
                            src="../../static/images/icon/myAddr.png"
                        ></image>
                        <text>收货地址</text>
                    </view>
                    <view class="arrowhead"></view>
                </view>
            </view>
        </view>
    </view>
</template>
<script scoped>
import { mapState, mapActions } from 'vuex';
export default {
    data(){
        return {
            sts: '',
            score: 0
        }
    },
    computed: {
        ...mapState({
            orderAmount: (state) => state.user.orderAmount,
            collectionCount: (state) => state.user.collectionCount,
        }),
    },
    onShow(){
        if(this.__route__==='pages/user/index'){
            this.getCount()
            this.getOrderCount()
        }
    },
    methods: {
        ...mapActions({
            getOrderCount: 'user/getOrderCount',
            getCount: 'user/getCount',
        }),
        toOrderListPage(e) {
            var sts = e.currentTarget.dataset.sts;
            console.log(sts);
            wx.navigateTo({
                url: '/pages/user/orderList/index?sts=' + sts,
            });
        },
        headleAddress() {
            wx.navigateTo({
                url: '/pages/user/address/index',
            });
        },
        toBindingPhone() {
            wx.navigateTo({
                url: '/pages/user/binding-phone/index',
            });
        },
        myCollectionHandle(){
            wx.navigateTo({
                url: '/pages/user/prod-classify/index?sts=5',
            })
        }
    },
    mounted(){
        
    },
};
</script>
<style src='./user.css' scoped>

</style>